<!--
 * @Description: 
 * @Author: yaodipeng
 * @Date: 2020-11-03 16:49:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-06 14:55:39
-->
<template>
   <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
     <img src="http://47.95.150.119/yyy/2.png" alt="" srcset="" width="100%">
      <div class="wrapper">
          
      </div>
      <!-- 板块 -->
      <div class="wrapper" style="min-height:400px" v-loading="loading">
        <div class="plates">
          <div class="plate" v-for="cas in categoryArticles" :key="cas.category.id">
            <div class="head">
              <div class="title">{{cas.category.name}}</div>
              <div class="more" @click="toListHandler(cas.category)">更多&gt;&gt;</div>
             
            </div>

            <div v-for="a in cas.aritcle" @click="toArticleHandler(a)" :key="a.id">

                  <img :src="a.cover" width="99.5%" height="243px"><br>
                <!-- <a href="javascript:;" class="weixin" data-fx="wx-btn1" title="微信" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.6"><img src="../assets/微信.png"></a> 
                <a href="javascript:;" class="weibo" data-fx="wb-btn" title="新浪微博" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.7"><img src="../assets/新浪微博.png"></a>
                <a href="javascript:;" class="qqzone" data-fx="qz-btn" title="QQ空间" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.8"><img src="../assets/QQ空间.png"></a>
                <a href="javascript:;" class="qq" data-fx="qq-btn" title="QQ" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.9"><img src="../assets/QQ.png"></a> -->

                  <!-- {{a.cover}} -->


            </div>
             <a class="share-a">
                <a href="javascript:;" class="weixin" data-fx="wx-btn1" title="微信" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.6"><img src="../assets/微信.png"></a> 
                <a href="javascript:;" class="weibo" data-fx="wb-btn" title="新浪微博" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.7"><img src="../assets/新浪微博.png"></a>
                <a href="javascript:;" class="qqzone" data-fx="qz-btn" title="QQ空间" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.8"><img src="../assets/QQ空间.png"></a>
                <a href="javascript:;" class="" data-fx="qq-btn" title="QQ" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.9"><img src="../assets/QQ.png"></a>
             </a>
            <!-- <ul class="list">
              <li v-for="a in cas.aritcle" @click="toArticleHandler(a)" :key="a.id">
                  <img src="a.cover">
                  </li>
            </ul> -->
          </div>
        </div>
      </div>
      <!-- /板块 -->
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>

</template>
<script>
import {get} from '../utils/request'
import Header from './components/Head'
import Footer from './components/Foot'
export default {
  // 4. 局部组件注册
  components:{
    Header,
    Footer
  },
  // 1. 数据
  data(){
    return {
      carousels:[],
      loading:false,
      categoryArticles:[]
    }
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created(){
    this.loadCarousels();
    this.loadCategoryArticles();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods:{
    // 跳转
    toListHandler(category){
      // 跳转
      this.$router.push({
        path:'/list',
        query:category
      })
    },
    toArticleHandler(article){
      this.$router.push({
        path:'/article',
        query:{
          id:article.id,
          name:article.category?article.category.name:''
        }
      })
    },
    // 加载轮播图数据
    loadCarousels(){
      let url = '/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
      })
    },
    // 加载板块数据
    loadCategoryArticles(){
      this.loading = true;
      let url = "/index/article/findCategoryArticles"
      get(url).then( resp => {
        this.categoryArticles = resp.data;
        this.loading = false;
      }),
      function() {
  var href = $(".xinwen18886_ind01 .list_con .silde").eq(index).attr("dataurl");
  var title = $(".xinwen18886_ind01 .list_con .silde").eq(index).find(".right_text h3 a").text();
  var brief = $(".xinwen18886_ind01 .list_con .silde").eq(index).find(".right_text p a").text();
  var shaimg = $(".xinwen18886_ind01 .list_con .silde").eq(index).find(".image img").attr("src");
  if (href == undefined) {
    href = "http://news.cctv.com/"
  }
  shareObj.shareUrl = href;
  shareObj.shareTitle = title;
  shareObj.pic = "https://" + shaimg.split("//")[1]
  shareObj.summary = brief;
  if ($(this).hasClass("weixin")) {
    if ($(this).parents(".share").find(".ind01cntvshare_weixin").length > 0) {
      $(".ind01cntvshare_weixin").remove()
    } else {
      requireQrcode2(index, href)
    }
  }

},
function() {
  var u = "//service.weibo.com/share/share.php?appkey=2078561600&title=" + shareObj.shareTitle + "&url=" + encodeURIComponent(shareObj.shareUrl) + "&pic=" + shareObj.pic + "&searchPic=false&style=simple";
  window.open(u)
},
function() {
  if (!shareObj.desc || typeof shareObj.desc == "undefined") {
    shareObj.desc = "";
  }
  var u = "//sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + encodeURIComponent(shareObj.shareUrl) + "&summary=" + shareObj.summary + "&title=" + encodeURIComponent(shareObj.shareTitle) + "&pics=" + shareObj.pic + "&desc=" + shareObj.desc;
  window.open(u)
},
function() {
  if (!shareObj.desc || typeof shareObj.desc == "undefined") {
    shareObj.desc = "";
  }
  var u = "//connect.qq.com/widget/shareqq/index.html?url=" + encodeURIComponent(shareObj.shareUrl) + "&summary=" + shareObj.summary + "&title=" + encodeURIComponent(shareObj.shareTitle) + "&pics=" + shareObj.pic + "&desc=" + shareObj.desc;
  window.open(u)
}
    }
  }
}
</script>
<style lang="scss" scoped>

// 变量
$color_primary:#0c87f3;
  // 内容样式
  .content {
    background-color: #f1f3f5;
  }
    .swapper{
     height: 450px;
     width: 100%;
    }
    .carousel {
        float: left;
        width: 68%;
        
   
      .img {
        width:100%;
        height: 100%;
      } 
      }
      img:hover{
          cursor: pointer;
      }
      .carousel-a{
          margin-left: 68%;
          height: 420px;
          padding-top: 30px;
          background-color: aliceblue;
          a:hover{
             color: rgb(140, 54, 20);
          }
          .aa{
              margin-left: 50px;
              
          .a{
              
              text-justify: inter-ideograph;
              font-weight: bold;
              
          }
      } 
      .share{
          
          margin-top: 55px;
         display: flex;
          justify-content: space-around;
          img{
              height: 30px;
              width: 30px;
          }
          
      }
      }
      .share-a{
          margin-top: 6px;
         display: flex;
          justify-content: space-around;
          img{
              height: 15px;
              width: 15px;
          }
          
      }

    .plates::after {
      content:"";
      display: block;
      clear: both;
    }
    .plates {
      padding:.5em 0;
      .plate {
        box-sizing: border-box;
        float: left;
        width: 32.5%;
        height: 300px;
        background-color: #fff;
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
      }
        .head {
          display: flex;
          justify-content: space-between;
        }
        //   .cover {
        //     width: 100%;
        //     h
        //   }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        ul.list {
          li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
          }
          li:hover {
            color: $color_primary;
          }
        }

      .plate:nth-child(3n){
        margin-right: 0;
      }
    
 
    }
</style>
